<!--
 * @Descripttion: 
 * @version: 
 * @Author: wishchan
 * @Date: 2021-12-09 15:15:59
 * @LastEditors: 川杨
 * @LastEditTime: 2022-01-14 09:52:43
-->
<template>
  <div class="business-chart">
    <div class="business-chart-tab" style="margin-bottom:70px;">
      <div class="header-left-detail">
        <p>{{ `${$t('report.costStatChart.workOrderCost')}：${splitPrice(totalData.acutalCost) || 0 } ${$t('common.base.yuan')}`}}</p>
        <p>{{ `${$t('report.costStatChart.totalPlannedCost')}：${splitPrice(totalData.planCost) || 0 } ${$t('common.base.yuan')}`}}</p>
        <p>{{ `${$t('report.costStatChart.ratio')}：${totalData.proportion || "0%" }`}}</p>
      </div>
      <div class="stats-btn-group"></div>
      <el-button class="business-export-btn" type='primary' @click="handlerExportClick" :loading="exportLoading">
        {{ $t('common.base.export') }}
      </el-button>
    </div>
    <bar-chart :chart-data="chartData" v-loading="loading" :is-loading="loading"></bar-chart>
  </div>
</template>
<script>
import BarChart from './BarChart.vue'
import { splitPrice } from 'src/util/math.js';
export default {
  name: 'cost-stat-chart',
  components:{
    [BarChart.name]:BarChart
  },
  props:{
    exportLoading:{
      type:Boolean,
      default:false
    },
    loading:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      chartType:'plan-a',
      chartData:{},
      totalData:{},
      splitPrice
    }
  },
  methods: {
    handlerExportClick(){
      this.$emit('export')
    },
    init(data, haveUsers){
      let {acutalCost, planCost, proportion} = data
      this.totalData = {
        acutalCost, 
        planCost, 
        proportion
      }
      this.getChartData(data.reportDate, haveUsers)
    },
    getTooltips(data, index, seriesIndex){
      if(this.chartType == 'plan-a'){
        return `
          <div class="tooltipTitle">${data[index].costStatisticsDataVOs[seriesIndex].dimensionName || this.$t('common.base.tip.noStaff')}</div>
          <div class="tooltipDetail">${data[index].costStatisticsDataVOs[seriesIndex].cost}${this.$t('common.base.yuan')}</div>
        `
      }
      return '';
      
    },
    getChartData(data, haveUsers) {
      if(!data)data = [];
      if(this.chartType == 'plan-a'){
        let that = this
        let originData = data[0] ? data[0].costStatisticsDataVOs : []
        let series = []
        series = (originData || []).map(item=>{
          return {
            type:'bar', 
            name:item.dimensionName,
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              color: 'auto',
              fontSize: 16
            }
          }
        })
        let dataSource = []
        data.forEach(item=>{
          let oneData = [item.date];
          series.forEach((element, index) => {
            oneData.push(item.costStatisticsDataVOs[index] ? item.costStatisticsDataVOs[index].cost : 0)
            // if(haveUsers || (!haveUsers && item.costStatisticsDataVOs[index].personName)){
            // }
          });
          dataSource.push(oneData)
        })
        if(dataSource.length == 0){
          return this.chartData = {}
        }
        this.chartData = {
          legend: {
            show: true,
            type:'scroll'
          },
          tooltip: {
            triggerOn:'mousemove',
            enterable:true,
            formatter: params => {
              return that.getTooltips(data, params.dataIndex, params.seriesIndex)
            }
          },
          dataset: {
            source:dataSource
          },
          xAxis: { type: 'category' },
          yAxis: {},
          series,
          dataZoom: [
            (data.length * series.length) > 30 ? {
              type: 'slider',
              show: true,
              start:1, // 数据窗口范围的起始百分比,表示1%
              end:50,
              xAxisIndex: 0,
              bottom:'10px'
            } : {
              type: 'slider',
              show: false,
              start:1, // 数据窗口范围的起始百分比,表示1%
              end:100,
              xAxisIndex: 0,
              bottom:'10px'
            }]
        };
      }


      // 这里处理饼状图数据
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../business.scss';
.tooltipTitle{
  color:$color-primary-light-6;
  font-size:14px;
}
.tooltipDetail{
  color:orange;
  font-size:12px;
}
.header-left-detail{
  position: absolute;
  left:20px;
  text-align: left;
  width:300px;
}
</style>
<style lang="scss">
.business-chart{
  .tooltipTitle{
    color:$color-primary-light-6;
    font-size:14px;
  }
  .tooltipDetail{
    color:orange;
    font-size:12px;
  } 
}
</style>